<script>
import { GlTabs, GlCard } from '@gitlab/ui';
import { s__ } from '~/locale';
import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
import VulnerabilityReportHeader from './vulnerability_report_header.vue';
import VulnerabilityReportTab from './vulnerability_report_tab.vue';
import { FIELD_PRESETS, FILTER_PRESETS, REPORT_TYPE_PRESETS } from './constants';

export const TAB_NAMES = {
  OPERATIONAL: 'OPERATIONAL',
};

const TAB_NAME_TO_INDEX = {
  [TAB_NAMES.OPERATIONAL]: 1,
};

const TAB_INDEX_TO_NAME = {
  1: TAB_NAMES.OPERATIONAL,
};

export default {
  components: { GlTabs, GlCard, VulnerabilityReportHeader, VulnerabilityReportTab },
  inject: ['dashboardType'],
  data() {
    return {
      tabIndex: TAB_NAME_TO_INDEX[this.$route.query.tab] ?? 0,
    };
  },
  computed: {
    isProjectReport() {
      return this.dashboardType === DASHBOARD_TYPES.PROJECT;
    },
    filterDropdownsDevelopment() {
      return this.isProjectReport ? FILTER_PRESETS.DEVELOPMENT_PROJECT : FILTER_PRESETS.DEVELOPMENT;
    },
    filterDropdownsOperational() {
      if (this.isProjectReport) {
        return FILTER_PRESETS.OPERATIONAL_PROJECT;
      }

      return FILTER_PRESETS.OPERATIONAL;
    },
  },
  watch: {
    tabIndex(index) {
      const query = {
        ...this.$route.query,
        tab: TAB_INDEX_TO_NAME[index],
        // Reset pagination when the tab is changed.
        before: undefined,
        after: undefined,
      };

      this.$router.push({ query });
    },
  },
  methods: {
    transformFiltersOperational(filters) {
      return {
        ...filters,
        reportType: REPORT_TYPE_PRESETS.OPERATIONAL,
      };
    },
  },
  i18n: {
    developmentTab: s__('SecurityReports|Development vulnerabilities'),
    operationalTab: s__('SecurityReports|Operational vulnerabilities'),
    operationalTabMessage: s__(
      'SecurityReports|These vulnerabilities were detected in external sources. They are not necessarily tied to your GitLab project. For example, running containers, URLs, and so on.',
    ),
  },
  FIELD_PRESETS,
};
</script>

<template>
  <div>
    <vulnerability-report-header />

    <gl-tabs v-model="tabIndex" content-class="gl-pt-0">
      <vulnerability-report-tab
        :title="$options.i18n.developmentTab"
        :fields="$options.FIELD_PRESETS.DEVELOPMENT"
        :filter-dropdowns="filterDropdownsDevelopment"
        :is-active-tab="tabIndex === 0"
      >
        <template #header>
          <slot name="header-development"></slot>
        </template>
      </vulnerability-report-tab>

      <vulnerability-report-tab
        :title="$options.i18n.operationalTab"
        :fields="$options.FIELD_PRESETS.OPERATIONAL"
        :filter-dropdowns="filterDropdownsOperational"
        :filter-fn="transformFiltersOperational"
        :is-active-tab="tabIndex === 1"
      >
        <template #header>
          <gl-card body-class="gl-p-6">{{ $options.i18n.operationalTabMessage }}</gl-card>
        </template>
      </vulnerability-report-tab>
    </gl-tabs>
  </div>
</template>
